<style scoped>
</style>
<template>
  <div class="driver_register fixed">
    <van-nav-bar title="司机注册" left-arrow @click-left="$router.push('/login')" />
    <div class="from">
      <van-field
        v-model="tel"
        maxlength="11"
        type="tel"
        label="手机号"
        placeholder="请输入手机号码"
      />
      <van-field
        v-model="sms"
        center
        clearable
        maxlength="4"
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            @click="verificationCode"
            :disabled="setTimeOutBool"
            >{{ seconds ? seconds + "s" : "发送验证码" }}</van-button
          >
        </template>
      </van-field>
      <van-field
        :value="IDNumber"
        maxlength="18"
        label="身份证号码"
        placeholder="请输身份证号码"
        @touchstart.native.stop="IDNumberOff = true"
      />
      <van-button
        color="#FF6600"
        style="width: 90%; margin: 0 auto"
        type="primary"
        block
        :disabled="sms.length == 4 && IDNumber.length == 18 ? false : true"
        @click="confirm"
        >下一步</van-button
      >
    </div>

    <!-- 输入身份证号码弹框 -->
    <van-number-keyboard
      v-model="IDNumber"
      :show="IDNumberOff"
      extra-key="X"
      close-button-text="完成"
      @blur="IDNumberOff = false"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data: () => ({
    tel: "",
    sms: "",
    IDNumber: "",
    IDNumberOff: false,
    setTimeOutBool: false,
    seconds: "",
    time: null,
    num: 10,
  }),
  methods: {
    verificationCode() {
      let { num, tel } = this;
      if (tel.length == 11) {
        this.setTimeOutBool = true;
        this.time = setInterval(() => {
          if (num <= 1) {
            clearInterval(this.time);
            this.setTimeOutBool = false;
            this.seconds = "";
          }
          num--;
          this.seconds = num;
        }, 1000);
        this.seconds = num;
      } else {
        Toast.fail("不合法手机号!");
      }
    },
    confirm() {
        let { IDNumber,tel,sms} = this;
        this.$store.commit('setDriver_msg',{IDNumber,tel,sms});
        setTimeout(()=>{
          this.$router.push('dri_reg1')
        },100)
    },
  },
};
</script>